<template>
	<view class="app bg-shop  clearfix hv100">
		<cu-custom bgColor="bg-white " isBack>
			<block slot="content">修改支付密码</block>
		</cu-custom>
		<form @submit="formSubmit" class="block clearfix   sm-border bg-transparent  ">
			<view class="bg-white px15 mt1 py20 flex align-center">
				<input   placeholder-class="text-info" class="text-black" placeholder="手机号" name="tel" v-model.trim="form.tel" />
			</view>
			<view class="bg-white px15 mt1 py20 flex align-center justify-between">
				<view class="flex align-center">
					<input placeholder-class="text-info" class="text-black" placeholder="请输入验证码" name="card" v-model.trim="form.card" />
				</view>
				<button class="cu-btn bg-transparent text-prices" style="color: #0ea391;" :disabled="disabled" @click="getCode">{{ codeText }}</button>
			</view>
			<view class="bg-white px15 mt1 py20 flex align-center">
				<input password maxlength="6" placeholder-class="text-info" class="text-black" placeholder="新支付密码" name="pwd" v-model.trim="form.pwd" />
			</view>
			<view class=" discenter px20 wp100">
				<button :disabled="isLoading" formType="submit" class="cu-btn block  wp100 radius-5 mt40 button-dangers text-white ">
					<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin mr5"></text>
					<view class="f16 flex align-center justify-between ">确认修改</view>
				</button>
			</view>
		</form>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() { 
		return {
			form:{
				card :'',
				pwd :'',
				tel:'',
			},
			codeText: '',
			disabled: false,
			count: 60,
			readonly: false,
		}
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad() {
		this.codeText = '获取验证码'
	},
	methods: {
		...mapActions(['getUser']),
		async getCode() {
			if (this.disabled) return
			let params = { phoneNum: this.form.tel}
			this.disabled = true
			try {
				this.$http.post('login.getCode', params, { isAuth: false, tipConfig: { isLoading: false } })
				clearInterval(this.time)
				this.time = setInterval(() => {
					this.count -= 1
					this.codeText = this.count + this.i18n.getCodeTime
					if (this.count === 0) {
						this.count = 60
						this.disabled = false
						this.codeText = this.i18n.getCode
						clearInterval(this.time)
					}
				}, 1000)
			} catch (e) {
				this.disabled = false
			}
		},
		async formSubmit(e) {
			if(this.form.tel==''){
				uni.showToast({
					title:'请输入手机号',
					icon:'none'
				})
				return false
			}
			if(this.form.card==''){
				uni.showToast({
					title:'请输入验证码',
					icon:'none'
				})
				return false
			}
			if(this.form.pwd==''){
				uni.showToast({
					title:'请设置支付密码',
					icon:'none'
				})
				return false
			}
			let params={
				phoneNum:this.form.tel,
				card:this.form.card,
				payPassword:this.form.pwd,
			}
			let { data } = await this.$http.post('user.paypassword', params, {
				tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  }
			})
			
		}

	}
}
</script>

<style lang="less">
.bb1{
	border-bottom: 0.5px solid #01404A !important;
}
.h55{
	height: 110rpx;
}
.pd0{
	padding: 0 !important;
}
.button-dangers{
	background-color: #0ea391 !important;
	height: 92rpx;
}
.border-dangers{
	border: 0.5px solid #0ea391 !important;
	border-radius: 30rpx;
}
.block-ps{
	width: 34rpx;
	height: 40rpx;
}
</style>
